<template>
    <a-modal v-model:visible="show"
             :title="titleName"
             :width="800"
             :maskClosable="false"
             :maskStyle="{ background: 'rgba(179,212,218,0.30)', backdropFilter: 'blur(10px)' }"
             :destroyOnClose="true"
             @ok="handleOk"
             @cancel="cancelModal">
        <a-form :model="formState" :labelCol="{span: 10}" ref="formData">
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="店铺所属分类" name="typeId" >
                        <a-select v-model:value="formState.typeId" @change="changeList">
                            <a-select-option v-for="item in dataList" :key="item.id" :value="item.id">{{item.typeName}}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="店铺名称" name="name">
                        <a-input v-model:value="formState.name" style="width: 200px" placeholder="请输入店铺名称" autocomplete="off"  />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="开始营业时间" name="beginTime">
                        <a-time-picker style="width: 210px" @change="changeBeginTime" v-model:value="beginTime" format="HH:mm" />
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item label="结束营业时间" name="endTime">
                        <a-time-picker style="width: 210px" @change="changeEndTime" v-model:value="endTime" format="HH:mm" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="是否营业" name="isBusiness">
                        <a-radio-group v-model:value="formState.isBusiness">
                            <a-radio :value = '0'>是</a-radio>
                            <a-radio :value = '1'>否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item label="店铺备注" name="remark">
                        <a-input v-model:value="formState.remark" style="width: 200px" placeholder="请输入备注" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="店铺地址" name="address">
                        <a-input v-model:value="formState.address" style="width: 200px" placeholder="请输入地址" autocomplete="off" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>


        </a-form>
    </a-modal>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted, computed,watch} from "vue";
import {apiGetTypeList} from "../../../../api";
import { Moment } from "moment";

export default defineComponent({
    name: "commonModal",
    props: {
        data: {
            type: Object,
            required: true
        },
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
        title: {
            type: String,
            default: "新增菜单"
        },
        typeName: {
            type: String
        }
    },
    setup(props, context) {
        const formData = ref()
        const formState = computed(() => {
            return props.data
        })
        const show = computed(()=> props.visible)
        const titleName = computed(()=> props.title)
        const typeName = computed(() => props.typeName)
        const state = reactive({
            treeData: JSON.parse(window.localStorage.getItem('meuns')),
            dataList: [],
            beginTime: ref(),
            endTime: ref(),
        })

        // 获取店铺所属分类类别
        const getTypeList = () => {
            const params = {
                limit: 1000,
                page: 1,
                name: '',
                type: 0
            }
            apiGetTypeList(params).then((res) => {
                if (res.data.code == 200) {
                    console.log(777777, res.data.data.list)
                    state.dataList = res.data.data.list
                }
            })
        }
        // 点击确定按钮
        const handleOk = () => {
            context.emit('close',typeName.value)
        }

        // 点击取消按钮
        const cancelModal = () => {
            context.emit('close', 'cancel')
        }

        // 选择option的回调
        const changeList = (value, option) => {
            // console.log(option.children[0].children)
            formState.value.typeName = option.children[0].children
        }

        watch(show, () => {
            // if (!show) {
            //     formState.value = {}
            // }
        })

        const changeBeginTime = (time, timeString) => {
            console.log('开始时间', timeString)
            formState.value.beginTime = timeString
        }
        const changeEndTime = (time, timeString) => {
            formState.value.endTime = timeString
        }
        onMounted(()=> {
            getTypeList()
        })

        return {
            ...toRefs(state),
            formData,
            formState,
            show,
            titleName,
            handleOk,
            cancelModal,
            changeList,
            changeBeginTime,
            changeEndTime,
        }
    }
})
</script>

<style scoped>

</style>